<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Smiles Drawer Example</title>
        <meta name="description" content="A minimal smiles drawer example.">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css" />
        <style>
            canvas { margin: 5px; }
        </style>
    </head>
    <body>
        <main class="wrapper">
            <section class="container">
                <div class="row">
                    <div class="column">
                        <div id="structure-container">
                        </div>
                    </div> 
                </div>  
                <div class="row">
                    <div class="column">
                        <a id="more" class="button" href="#">Load More ...</a>
                    </div>
                </div>
            </section>
        </main>

        <script src="../dist/smiles-drawer.js"></script>
        <script src="drugbank.js"></script>
        <script src="schembl.js"></script>
        <script src="gdb17.js"></script>
        <script src="chembl.js"></script>
        <script src="fdb.js"></script>
        <script>
            var parseQueryString = function(url) {
                var urlParams = {};
                url.replace(
                    new RegExp("([^?=&]+)(=([^&]*))?", "g"),
                    function($0, $1, $2, $3) {
                        urlParams[$1] = $3;
                    }
                );
                
                return urlParams;
            }

            let set = drugbank;
            let setName = 'drugbank'

            let setNameQuery = parseQueryString(window.location.href).set;
            if (setNameQuery) {
                if (setNameQuery === 'drugbank') {
                    set = drugbank;
                    setName = 'drugbank';
                } else if (setNameQuery === 'schembl') {
                    set = schembl;
                    setName = 'schembl';
                } else if (setNameQuery === 'gdb17') {
                    set = gdb17;
                    setName = 'gdb17';
                } else if (setNameQuery === 'chembl') {
                    set = chembl;
                    setName = 'chembl';
                } else if (setNameQuery === 'fdb') {
                    set = fdb;
                    setName = 'fdb';
                }
            }

            let options = {};
            let batchSize = 200;
            let to = batchSize;
            let container = document.getElementById('structure-container');
            let button = document.getElementById('more');

            button.addEventListener('click', function(e) {
                to += batchSize;
                more();
                e.preventDefault();
                return false;
            });

            // Initialize the drawer
            let smilesDrawer = new SmilesDrawer.Drawer(options);

            function more() {
                for (let i = to - batchSize; i < Math.min(to, set.length) ; i++) {
                    try {
                        let canvas = document.createElement('canvas');
                        canvas.setAttribute('id', 'canvas' + i);
                        canvas.setAttribute('width', '200');
                        canvas.setAttribute('height', '200');
                        canvas.setAttribute('alt', set[i]);
                        container.appendChild(canvas);
                        
                        SmilesDrawer.parse(set[i], function(tree) {
                            smilesDrawer.draw(tree, 'canvas' + i, 'light', false);
                        });

                        // if (td > 1000) console.log(schembl[i]);
                    } catch (exception) {

                    }
                }
            }

            more();
        </script>
    </body>
</html>
